<script setup lang="ts">
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting, UserFilled,CloseBold } from '@element-plus/icons-vue'
import { House } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';
import UserStore from "../store/UserStore";
let router = useRouter();
let store = UserStore();
let account = ref(store.getAccount);
let gotoindex = () => {
    router.push('/index')
    alert("跳转");
}
let logout = () => {
    router.push('/login')
}

</script>

<template>
    <div class="common-layout ,max">
        <el-container class="max">
            <el-header id="header">
                <div id="logo">企业人事管理平台</div>
                <div id="msg">
                    <div id="name">
                        <button>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            {{ account }}
                        </button>
                    </div>
                    <div id="logout"><button @click="logout"><el-icon><CloseBold /></el-icon>注销</button></div>
                </div>
            </el-header>
            <el-container class="max">
                <el-aside width="200px" style=" background-color: #333;">
                    <el-scrollbar>
                        <el-menu :default-openeds="['1', '3']" :router="true" active-text-color="#409EFF"
                            style="background-color: #444444; margin: 0px;">
                            <el-menu-item index="/index" class="white">
                                <template #title @click="gotoindex">
                                    <el-icon>
                                        <House />
                                    </el-icon>首页
                                </template>
                            </el-menu-item>
                            <el-menu-item index="/selfmsg" class="white">
                                <template #title>
                                    <el-icon>
                                        <House />
                                    </el-icon>查看个人信息
                                </template>
                            </el-menu-item>
                            <el-menu-item index="/pwupdate" class="white">
                                <template #title>
                                    <el-icon>
                                        <House />
                                    </el-icon>修改登录密码
                                </template>
                            </el-menu-item>
                            <el-sub-menu index="4" class="white">
                                <template #title>
                                    <el-icon>
                                        <message />
                                    </el-icon><p style="color: white;">时间管理</p>
                                </template>
                                <el-menu-item-group style=" background-color: #444444;">
                                    <el-menu-item index="a" class="white">a.考勤打卡</el-menu-item>
                                    <el-menu-item index="b" class="white">b.审批考勤补签</el-menu-item>
                                    <el-menu-item index="c" class="white">c.申请休假</el-menu-item>
                                    <el-menu-item index="d" class="white">d.休假记录</el-menu-item>
                                    <el-menu-item index="e" class="white">e.审批休假</el-menu-item>
                                    <el-menu-item index="f" class="white">f.月度出勤记录</el-menu-item>
                                    <el-menu-item index="g" class="white">g.日历设定</el-menu-item>
                                    <el-menu-item index="h" class="white">h.审批人设定</el-menu-item>
                                    <el-menu-item index="i" class="white">i.人员排班设定</el-menu-item>
                                    <el-menu-item index="j" class="white">j.排班类型设定</el-menu-item>
                                    <el-menu-item index="k" class="white">k.假期类型设定</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-menu-item index="eim" class="white">
                                <template #title>
                                    <el-icon>
                                        <House />
                                    </el-icon>员工信息管理
                                </template>
                            </el-menu-item><el-menu-item index="dim" class="white">
                                <template #title>
                                    <el-icon>
                                        <House />
                                    </el-icon>部门信息管理
                                </template>
                            </el-menu-item><el-menu-item index="jim" class="white">
                                <template #title>
                                    <el-icon>
                                        <House />
                                    </el-icon>职位信息管理
                                </template>
                            </el-menu-item>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-main id="main">
                    <div id="mainbox">
                        <RouterView></RouterView>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped>
#header {
    display: flex;
    justify-content: space-between;
    background-color: #333;
}

#msg {
    display: flex;
    align-items: center;
    background-color: #333;

}

#msg button {
    margin-left: 10px;
    width: 80px;
    height: 30px;
    background-color: #333;

}

#msg button:hover {
    background-color: #000;
    color: #fff;
}

.max {
    width: 100%;
    height: 100%;
}

.el-menu-item {
    background-color: #333 !important;
}

.el-menu-item:hover {
    outline: 0 !important;
    color: #409EFF !important;
}

div {
    box-sizing: border-box;
    /* border: 1px solid #ccc; */

}

#logo {
    background-color: #333;
    color: aliceblue;
    padding: 20px;
    font-size: 20px;
}

.white {
    color: white;
}

.common-layout {
    height: 100%;
    background-color: #333;
}

#mainbox {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
#main{
    position: relative;
    top: -15px;
    border-radius: 15px;
    padding: 0px;
    height: 100%;
}

</style>
